<template>
    <div id="bottom_bar">
        <div class="checkAll" @click="checkAll">
            <img src="../../../assets/img/checked.png" v-show="isShow">
        </div>
        <div class="payAll">
            合计:{{payAll}}元
        </div>
        <div class="toPay" @click="toPay">
            去支付
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    export default {
        name: "ShopBottomBar",
        data(){
            return{
                isShow:true
            }
        },
        computed:{
            //计算总钱数
            payAll(){
               return  this.$store.state.shopInfo.filter(item =>{
                   return item.checked === true
               }).reduce((pre,value) =>{
                   return pre + (value.price * value.count)
               },0).toFixed(2)
            }
        },
        methods: {
            //是否选中全部
            checkAll() {
                const a = [];
                //将已选中的放入数组中
                for (let item of this.$store.state.shopInfo){
                    if (item.checked){
                        a.push(item)
                    }
                }
                if (a.length > 0){
                    for (let item of a){
                        item.checked = false
                    }
                    this.isShow = false
                }else {
                    for (let item of this.$store.state.shopInfo){
                      item.checked = true
                    }
                    this.isShow = true
                }
            },
            //商品全部被选中，底部选项则显示选中
            isCheck(){
                const a = [];
                for (let item of this.$store.state.shopInfo){
                    if (item.checked){
                        a.push(item)
                    }
                }
                if (a.length === this.$store.state.shopInfo.length){
                    this.isShow = true
                }else{
                    this.isShow = false
                }
            },
            //支付按钮相关业务
            toPay(){
                if(this.$store.state.shopInfo.length === 0){
                    Toast({
                        position:'middle',
                        message:'至少添加一件商品！',
                        duration:1000
                    })
                }else {
                    console.log("支付")
                }

            }
        },
        updated(){
            this.isCheck()
            }
    }
</script>

<style scoped>
    #bottom_bar{
        position: fixed;
        bottom: 54px;
        left: 0;
        right: 0;
        width: 100%;
        height: 40px;
        line-height: 30px;
        background-color:#f6f6f6;
        display: flex;
    }
    .checkAll{
        width: 22px;
        height: 22px;
        border: 1px silver solid;
        border-radius: 50%;
        margin-top: 10px;
        margin-left: 10px;
    }
    .checkAll img{
        width: 22px;
        height: 22px;
    }
    .payAll{
        flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .toPay{
        color: white;
        background-color: palevioletred;
        padding: 2px 8px;
        width: 100px;
        text-align: center;
        line-height: 40px;
    }
</style>